<template>
  <!--学生的相关成绩管理-->
  <el-table
      :data="tableData.filter(data => !search || data.subject.toLowerCase().includes(search.toLowerCase()))"
      v-if="studentId!==''"
  >
    <el-table-column
        label="学科"
        prop="subject"
    ></el-table-column>
    <el-table-column
        label="日期"
        prop="date"
    ></el-table-column>
    <el-table-column
        label="成绩"
        prop="grade"
    ></el-table-column>
    <el-table-column
        align="right">
      <template slot="header" slot-scope="{}">
        <el-row :gutter="10">
          <el-col :span="20">
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
          </el-col>
          <el-col :span="4">
            <add-student-grade :student-id="studentId"></add-student-grade>
          </el-col>
        </el-row>
      </template>
      <template slot-scope="scope">
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
//import {teacher_studentGrade} from "@/js/testConfig.mjs";
import AddStudentGrade from "@/components/teacher/mianView/gradeManger/AddStudentGrade";
import axios from "axios";

export default {
  name: "GradeTable",
  components: {AddStudentGrade},
  //根据传入的studentId来获取相应的数据
  props: {
    studentId: String
  },
  data() {
    return {
      search: '',
      //tableData: teacher_studentGrade.grades,
    }
  },
  methods: {
    handleDelete(index, row) {
      this.deleteById(row.id)
    },
    selectDateByStudentId(sid) {
      //todo 获取相关的数据,获取的数据是该主键的数据源
      console.log('向服务器查询有关学号为' + sid + '的数据')
    },
    deleteById(id) {
      //todo 删除相关的数据并刷新数据源
      console.log("删除了id为" + id + '的数据')
      axios
          .delete(`teacher/deleteGrade/${id}`)
          .then(response => {
            console.log(response.data)
            this.$store.dispatch("flashDataForTeacher_grade",this.studentId)
          })
          .catch(e => {
            console.log(e)
          })
    }
  },
  watch: {
    studentId(newSid, oldSid) {
      this.selectDateByStudentId(newSid)
      this.$store.dispatch("flashDataForTeacher_grade", newSid)
      console.log(oldSid)
    }
  },
  computed: {
    tableData: function () {
      return this.$store.state.teacher_gradeData.grades
    }
  }
}
</script>

<style scoped>

</style>